<template>
  <div class="recommend-container">
    <el-page-header @back="goBack" title="返回">
      <template #content>
        <h2>可能认识的人</h2>
      </template>
    </el-page-header>

    <el-divider />

    <div v-if="isLoading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>

    <el-alert v-else-if="error" :title="error" type="error" show-icon closable @close="error = null" />

    <template v-else>
      <div v-if="recommendations.length === 0" class="empty-tip">
        <el-empty description="填写详细的社交信息，为您推荐更多可能认识的人哦~" />
      </div>

      <div v-else class="recommend-list">
        <RecommendUserCard v-for="user in recommendations" :key="user.userId" :user="user" />
      </div>

      <div class="load-more">
        <el-button type="primary" :loading="isLoading" @click="loadMore" v-if="recommendations.length >= limit">
          加载更多
        </el-button>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useSocialStore } from '@/stores/modules/social/social';
import RecommendUserCard from '@/components/social/RecommendUserCard.vue';
import { useUserStore } from "@/stores";

// 实例化 stores
const userStore = useUserStore();
const router = useRouter();
const socialStore = useSocialStore();

const isLoading = computed(() => socialStore.isLoading);
const error = computed(() => socialStore.error);
const recommendations = computed(() => socialStore.recommendations || []);

// 设置初始加载数量
const limit = ref(9);
// 获取推荐数据
const fetchData = async () => {
  await socialStore.fetchRecommendations(limit.value, userStore.currentUser.userId);
};
// 加载更多推荐
const loadMore = () => {
  limit.value += 5;
  fetchData();
};
// 返回上一页
const goBack = () => {
  router.go(-1);
};
// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.recommend-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
  overflow: scroll;
}

.loading-container {
  padding: 20px 0;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.load-more {
  margin-top: 24px;
  text-align: center;
}

.empty-tip {
  margin-top: 40px;
}
</style>